---
title: Arquitectura de islas
description: Descubre cómo la arquitectura de islas de Astro contribuye a la rapidez de los sitios web.
i18nReady: true
---

import IslandsDiagram from '~/components/IslandsDiagram.astro';
import ReadMore from '~/components/ReadMore.astro';

Astro ayudó a promover y popularizar un nuevo patrón de arquitectura de frontend llamado **Arquitectura de islas.** La arquitectura de islas funciona renderizando la mayor parte de la página en HTML rápido y estático, añadiendo "islas" más pequeñas de JavaScript cuando se necesita interactividad o personalización en la página (un carrusel de imágenes, por ejemplo). Esto evita las cargas monolíticas de JavaScript que ralentizan la capacidad de respuesta de muchos otros marcos web modernos de JavaScript.

## Una breve historia

El término "isla de componente" fue acuñado por primera vez por la arquitecta de frontend de Etsy [Katie Sylor-Miller](https://sylormiller.com/) en 2019. Esta idea fue luego expandida y documentada en [esta publicación](https://jasonformat.com/islands-architecture/) por el creador de Preact, Jason Miller, el 11 de agosto de 2020.

> La idea general de una arquitectura de "Islas" es engañosamente simple: renderizar páginas HTML en el servidor e inyectar placeholders o slots alrededor de regiones altamente dinámicas [...] que luego pueden ser "hidratadas" en el cliente en pequeños widgets autocontenidos, reutilizando su HTML inicial renderizado en el servidor.
> - Jason Miller, Creador de Preact

Esta técnica se basa en el patrón de arquitectura también conocido como **hidratación parcial** o **selectiva.**

En contraste, la mayoría de los frameworks web basados en JavaScript hidratan y renderizan un sitio web completo como una gran aplicación de JavaScript (también conocida como aplicación de una sola página o SPA). Las SPAs proporcionan simplicidad y potencia, pero sufren de problemas de rendimiento de carga de página debido al uso de JavaScript pesado del lado del cliente.

Las SPAs tienen su lugar, incluso [incrustadas dentro de una página Astro](/es/guides/migrate-to-astro/from-create-react-app/). Pero, las SPAs carecen de la capacidad nativa de hidratación selectiva y estratégica, lo que las convierte en una opción demasiado pesada para la mayoría de los proyectos en la web hoy en día.

Astro se hizo popular como el primer framework web de JavaScript con hidratación selectiva incorporada, utilizando ese mismo patrón de islas de componentes acuñado por primera vez por Sylor-Miller. Desde entonces, hemos ampliado y evolucionado el trabajo original de Sylor-Miller, que ayudó a inspirar un enfoque similar de la isla de componentes para el contenido renderizado dinámicamente en el servidor.

## ¿Qué es una isla?

En Astro, una isla es un componente de interfaz de usuario mejorado en una página HTML que, de otro modo, sería estática.
 
Una [**isla del cliente**](#islas-del-cliente) es un componente de interfaz de usuario interactivo JavaScript que se hidrata por separado del resto de la página, mientras que una [**isla del servidor**](#islas-del-servidor) es un componente de interfaz de usuario que renderiza en servidor su contenido dinámico por separado del resto de la página.
 
Ambas islas ejecutan procesos caros o lentos de forma independiente, por componente, para optimizar la carga de las páginas.
 
## Componentes de la isla
 
Los componentes de Astro son los bloques de construcción de tu plantilla de página. Se convierten en HTML estático sin tiempo de ejecución del lado del cliente.
 
Piensa en una isla cliente como un elemento interactivo flotando en un mar de HTML estático, ligero y renderizado por el servidor. Las islas de servidor pueden añadirse para elementos personalizados o dinámicos renderizados en el servidor, como la foto de perfil de un visitante conectado.

<IslandsDiagram>
  <Fragment slot="headerApp">Encabezado (isla interactiva)</Fragment>
  <Fragment slot="sidebarApp">Barra Lateral (HTML estático)</Fragment>
  <Fragment slot="main">
    Contenido estático como texto, imágenes, etc.
  </Fragment>
  <Fragment slot="carouselApp">Carrusel de imágenes (isla interactiva)</Fragment>
  <Fragment slot="footer"> Pie de página (HTML estático)</Fragment>
  <Fragment slot="source">Fuente: [Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/)</Fragment>
</IslandsDiagram>

Una isla siempre se ejecuta en aislamiento de otras islas en la página, y pueden existir múltiples islas en una página. Las islas cliente aún pueden compartir estado y comunicarse entre sí, incluso si se ejecutan en diferentes contextos de componentes.

Esta flexibilidad permite que Astro admita múltiples frameworks de UI como [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/), y [SolidJS](https://www.solidjs.com/). Debido a que son independientes, incluso puedes mezclar varios frameworks en cada página.

:::tip
Aunque la mayoría de los desarrolladores se quedarán con un solo framework de UI, Astro admite múltiples frameworks en el mismo proyecto. Esto te permite:

- Escoger el framework que sea mejor para cada componente.
- Aprender un nuevo framework sin necesidad de iniciar un nuevo proyecto.
- Colaborar con otros incluso cuando trabajan en diferentes frameworks.
- Convertir gradualmente un sitio existente a otro framework sin tiempo de inactividad.
:::

## Islas del cliente

Por defecto, Astro renderizará automáticamente cada componente de UI a solo HTML y CSS, **eliminando todo el JavaScript del lado del cliente automáticamente.** 

```astro title="src/pages/index.astro"
<MyReactComponent />
```

Esto puede sonar estricto, pero este comportamiento es lo que mantiene los sitios web de Astro rápidos por defecto y protege a los desarrolladores de enviar accidentalmente JavaScript innecesario o no deseado que podría ralentizar tu sitio web.

Convertir cualquier componente de UI estático en una isla interactiva solo requiere una directiva `client:*`. Astro luego construye y empaqueta automáticamente tu JavaScript del lado del cliente para un rendimiento optimizado.

```astro title="src/pages/index.astro" ins="client:load"
<!-- ¡Este componente ahora es interactivo en la página! 
     El resto de tu sitio web se mantendrá estático. -->
<MyReactComponent client:load />
```

Con las islas, el JavaScript del lado del cliente solo se carga para los componentes interactivos explícitos que marcas usando directivas `client:*`.

Y debido a que la interacción se configura a nivel de componente, puedes manejar diferentes prioridades de carga para cada componente según su uso. Por ejemplo, `client:idle` le dice a un componente que se cargue cuando el navegador se vuelve inactivo, y `client:visible` le dice a un componente que se cargue solo una vez que ingresa al viewport.

<h3>Beneficios de las islas del cliente</h3>

El beneficio más obvio de construir con las islas de Astro es el rendimiento: la mayor parte de tu sitio web se convierte a HTML rápido y estático, y el JavaScript solo se carga para los componentes individuales que lo necesitan. JavaScript es uno de los assets más lentos que puede cargar byte por byte, por lo que cada byte cuenta.

Otro beneficio es la carga en paralelo. En la ilustración del ejemplo anterior, la isla del "carrusel de imágenes" de baja prioridad no necesita bloquear la isla del "encabezado" de alta prioridad. Los dos se cargan en paralelo y se hidratan de forma aislada, lo que significa que el encabezado se vuelve interactivo de inmediato sin tener que esperar que cargue el carrusel más pesado en la parte inferior de la página.

Aún mejor, puedes decirle a Astro exactamente cómo y cuándo renderizar cada componente. Si cargar ese carrusel de imágenes es realmente costoso, puedes adjuntar una [client directive](/es/reference/directives-reference/#directivas-del-cliente) (directiva de cliente) especial que le indica a Astro a solo cargar el carrusel al momento en que sea visible en la página. Si el usuario nunca lo ve, nunca se carga.

En Astro, depende de ti como desarrollador decirle explícitamente a Astro cuáles componentes de la página deben ejecutarse también en el navegador. Astro solo hidratará exactamente lo que se necesita en la página y dejará el resto de tu sitio como HTML estático.

**¡Las islas de cliente son el secreto del rápido rendimiento por defecto de Astro!**
 
<ReadMore>Más información sobre [el uso de componentes de frameworks de JavaScript](/es/guides/framework-components/) en tu proyecto.</ReadMore>
 
## Islas del servidor

Las islas del servidor son una forma de apartar el código caro o lento del lado del servidor del proceso principal de renderizado, lo que facilita la combinación de HTML estático de alto rendimiento y componentes dinámicos generados por el servidor.

Añade la directiva [`server:defer`](/es/reference/directives-reference/#directivas-del-servidor) a cualquier componente de Astro de tu página para convertirlo en su propia isla del servidor:

```astro title="src/pages/index.astro" "server:defer"
---
import Avatar from '../components/Avatar.astro';
---
<Avatar server:defer />
```

Esto divide la página en pequeñas áreas de contenido renderizado por el servidor que se cargan en paralelo.

El contenido principal de tu página puede ser renderizado inmediatamente con contenido alternativo, como un avatar genérico hasta que el contenido propio de tu isla esté disponible. Con las islas del servidor, tener pequeños componentes de contenido personalizado no retrasa la renderización de una página que, de otro modo, sería estática.

Este patrón de renderizado fue construido para ser portable. No depende de ninguna infraestructura de servidor, por lo que funcionará con cualquier host, desde un servidor Node.js en un contenedor Docker hasta el proveedor sin servidor de tu elección.

<h3>Beneficios de las islas del servidor</h3>

Una de las ventajas de las islas del servidor es la posibilidad de renderizar sobre la marcha las partes más dinámicas de la página. De este modo, la capa exterior y el contenido principal se almacenan en caché de forma más agresiva, lo que proporciona un rendimiento más rápido.

Otra ventaja es ofrecer una gran experiencia al visitante. Las islas del servidor están optimizadas y se cargan rápidamente, a menudo incluso antes de que el navegador haya pintado la página. Pero en el poco tiempo que tardan tus islas en renderizarse, puedes mostrar contenido fallback personalizado y evitar cualquier cambio de diseño.

Un ejemplo de sitio que se beneficia de las islas del servidor de Astro es una tienda de comercio electrónico. Aunque el contenido principal de las páginas de productos cambia con poca frecuencia, estas páginas suelen tener algunas piezas dinámicas:

- El avatar del usuario en la cabecera.
- Ofertas y rebajas especiales del producto.
- Reseñas de los usuarios.

Utilizando islas del servidor para estos elementos, tu visitante verá la parte más importante de la página, tu producto, inmediatamente. Los avatares genéricos, los spinners de carga y los anuncios de la tienda pueden mostrarse como contenido alternativo hasta que las partes personalizadas estén disponibles.

<ReadMore>Más información sobre [el uso de islas de servidor](/es/guides/server-islands/) en tu proyecto.</ReadMore>
